<template>
  <a-layout-header class="header">
    <div class="logo">
      <router-link to="/welcome">
        12306购票服务
      </router-link>
    </div>
    <div style="float: right; color: white">
      您好：{{member.mobile}} &nbsp;&nbsp;
      <router-link to="/login" style="color: white" >
        退出登录
      </router-link>
    </div>
    <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined /> &nbsp; 欢迎
        </router-link>
      </a-menu-item>
      <a-menu-item key="/passenger">
        <router-link to="/passenger">
          <user-outlined /> &nbsp; 乘车人管理
        </router-link>
      </a-menu-item>
    </a-menu>
  </a-layout-header>
</template>

<script>
import {defineComponent, ref, watch} from 'vue';
import store from "@/store";
import {CoffeeOutlined, UserOutlined} from "@ant-design/icons-vue";
import router from "@/router";

export default defineComponent({
  name: "the-header-view",
  components: {
    CoffeeOutlined, UserOutlined,
  },
  setup() {
    // 因为header组件只需要显示member的信息，不会修改member，所以只需要声明为普通变量，不需要响应式变量
    let member = store.state.member;
    // 定义一个变量，存储被选中的key，用于和v-model的selectedKeys绑定实现按钮是否被选中
    const selectedKeys = ref([]);
    watch(() => router.currentRoute.value.path,
        newValue => {
          console.log("watch", newValue);
          // 先清空再push
          selectedKeys.value = [];
          selectedKeys.value.push(newValue);
        },
        {immediate: true});

    // 哪些东西需要被html用到，就需要return储去
    return {
      member,
      selectedKeys,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
  float: left;
  height: 31px;
  width: 150px;
  color: white;
  font-size: 20px;
}
</style>